<template>
	<div>
	  <MainContent>
		 <div class="content_title">
		 	<span style="color: #222222;font-size: 24px;font-weight: 400;">{{title}}</span>
		 	
		 </div>
		 <div class="table_content">
		 	<el-row>
				<!-- <span style='color: #222222;font-size: 24px;font-weight: 400;'>正在进行</span> -->
				<button class="el-button mini addActivity" @click="NewMission()"> 发布积分任务</button>
				</el-row>
		 	<el-row style='margin-top: 30px;'>
		 		<el-tabs v-model="activeName" type="card" @tab-click="handleClick()">
				    <el-tab-pane label="正在进行" name="1">
								    	
								    	
						   <el-table
					        ref="multipleTable"
					        :data="nowDataList"
					        style='width: 99%;'
					        tooltip-effect="dark">
						<el-table-column
				          align="center"
				          label="任务标题">
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="lookActivityDetail(scope.row)" v-html='scope.row.Title'></el-button>
				          </template>
				          
				        </el-table-column>
				        <el-table-column
				          align="center"
				          prop="MissionId"
				          label="任务编码">
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="待审核">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyExamine(scope.row)" v-html='scope.row.WaitNumber'></el-button>
				          </template>
				        </el-table-column>
				        
				        <el-table-column
				          align="center"
				          label="工作中">
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyWorking(scope.row)" v-html='scope.row.WorkIng'></el-button>
				          </template>
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="待确认">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyConfirm(scope.row)" v-html='scope.row.WaitTrue'></el-button>
				          </template>
				          
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="已结束">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyEnd(scope.row)" v-html='scope.row.End'></el-button>
				          </template>
				          
				        </el-table-column>
				         <el-table-column
				          align="center"
				          label="已关闭">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyClose(scope.row)" v-html='scope.row.Close'></el-button>
				          </template>
				          
				        </el-table-column>
				         <el-table-column
				          align="center"
				          label="已退出">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyExit(scope.row)" v-html='scope.row.Exit'></el-button>
				          </template>
				          
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="操作">
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="CloseMission(scope.row)">关闭</el-button>
				          </template>
				        </el-table-column>
					  </el-table>
								    	
				    </el-tab-pane>
				    <el-tab-pane label="待发布" name="2">
								    	
								    	
						   <el-table
					        ref="multipleTable"
					        :data="readyDataList"
					        style='width: 99%;'
					        tooltip-effect="dark">
								<el-table-column
				          align="center"
				          prop="Title"
				          label="任务标题">
				        </el-table-column>
				        <el-table-column
				          align="center"
				          prop="MissionId"
				          label="任务编码">
				        </el-table-column>
				        <el-table-column
				          align="center"
				          prop="Time"
				          label="发布时间">
				        </el-table-column>				       
				        <el-table-column
				          align="center"
				          label="操作">
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="CloseMission(scope.row)">关闭</el-button>
				          </template>
				        </el-table-column>
					      </el-table>
				    </el-tab-pane>
				    <el-tab-pane label="已结束" name="3">
							    	
					   <el-table
				        ref="multipleTable"
				        :data="endDataList"
				        style='width: 99%;'
				        tooltip-effect="dark">
				        <el-table-column
				          align="center"
				          prop="Title"
				          label="任务标题">
				        </el-table-column>
				        <el-table-column
				          align="center"
				          prop="MissionId"
				          label="任务编码">
				        </el-table-column>
				       <el-table-column
				          align="center"
				          label="待审核">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyExamine(scope.row)" v-html='scope.row.WaitNumber'></el-button>
				          </template>
				        </el-table-column>
				        
				        <el-table-column
				          align="center"
				          label="工作中">
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyWorking(scope.row)" v-html='scope.row.WorkIng'></el-button>
				          </template>
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="待确认">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyConfirm(scope.row)" v-html='scope.row.WaitTrue'></el-button>
				          </template>
				          
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="已结束">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyEnd(scope.row)" v-html='scope.row.End'></el-button>
				          </template>
				          
				        </el-table-column>
				         <el-table-column
				          align="center"
				          label="已关闭">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyClose(scope.row)" v-html='scope.row.Close'></el-button>
				          </template>
				          
				        </el-table-column>
				         <el-table-column
				          align="center"
				          label="已退出">
				          
				          <template slot-scope="scope">
				            <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="readyExit(scope.row)" v-html='scope.row.Exit'></el-button>
				          </template>
				          
				        </el-table-column>
				        <el-table-column
				          align="center"
				          label="操作">
				          <template slot-scope="scope">
				              <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="ExportMission(scope.row)">导出</el-button>
				              
				              <el-button
				              size="mini"
				              type="text"
				              style='color:#3661ff'
				              @click="CloseMission(scope.row)">关闭</el-button>
				          </template>
				        </el-table-column>
				      </el-table>
				    	
				    </el-tab-pane>
				    <el-tab-pane label="已关闭" name="4">
				          	    	
						   <el-table
					        ref="multipleTable"
					        :data="exitDataList"
					        style='width: 99%;'
					        tooltip-effect="dark">
								<el-table-column
						          align="center"
						          prop="Title"
						          label="任务标题">
						        </el-table-column>
						        <el-table-column
						          align="center"
						          prop="MissionId"
						          label="任务编码">
						        </el-table-column>
						        <el-table-column
						          align="center"
						          prop="Time"
						          label="退出时间">
						        </el-table-column>	
					       
					      </el-table>
				    
				    </el-tab-pane>
				 </el-tabs>
		 	</el-row>
		 	<el-row style='margin-top: 20px;text-align: center;'>
			 	<el-pagination 
					  @current-change="handleCurrentChange"
					  :current-page="currentPage"
		        	layout="prev, pager, next" 
		        	page-size='10'
		        	:total="allPage" 
		        	>
		        </el-pagination>
		 	</el-row>
		 </div>
      </MainContent>
   </div>
</template>
<script>
	import MainContent from '../components/main_content'
	import global from './global'
	export default {
    name: "Index",
    inject:['reload'],
    mounted(){
			this.handleClick('1')
    	console.log(global.urlAll)
    },
    data() {
    	return {
    		title: '积分任务',
    		nowDataList: [],
    		allPage: '0',
    		readyDataList: [],
    		endDataList: [],
    		currentPage: '1',
    		exitDataList: [],
			activeName:"1"
    	}
    },
    components:{
    	MainContent
    },
    methods:{
			//导出任务
			ExportMission(row){
				let _this = this;
    		    global.$http({
						method:'get',
						url:global.urlAll+'ExportExcel/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							MissionId:row.MissionId,
						}
					}).then((res)=>{
						if(res.data.Success="true"){
							_this.$message("导出成功")
							window.open(res.data.Url, '_blank');
						}else{
							_this.$message("网络异常，请重试")
						}
					})					
			},
			//关闭任务
			CloseMission(row){
				let _this = this;
    			global.$http({
						method:'get',
						url:global.urlAll+'CloseMission/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							MissionId:row.MissionId,
							Status:_this.activeName,
							Kind:'0',
						}
					}).then((res)=>{
						if(res.data.Success="true"){
							_this.$message("关闭成功")
							_this.handleClick()
						}else{
							_this.$message("网络异常，请重试")
						}
					})				
			},
    		handleClick(pageNum){
				let _this = this;
				let kind = _this.activeName;
				this.currentPage = '1';
    			global.$http({
						method:'get',
						url:global.urlAll+'PcScoreMissions/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							BusinessId:$.cookie("userId"),
							Status:kind,
							Page:pageNum || '1',
							Row: '11'
						}
					}).then((res)=>{
						if(res.data.success="true"){
							if(kind == "1"){
								_this.nowDataList = res.data.data
							}else if(kind == "2"){
								_this.readyDataList = res.data.data
							}else if(kind == "3"){
								_this.endDataList = res.data.data
							}else if(kind == "4"){
								_this.exitDataList = res.data.data
							}
							_this.allPage = res.data.DateNum;
						}else{
							_this.$message("网络异常，请重试")
						}
					})
    	    },
    	    readyExamine(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '待审核', Status: '1',Id: missionId, taskKind: '0'}})
    	    },
    	    readyWorking(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '工作中', Status: '2',Id: missionId, taskKind: '0'}})
    	    },
    	    readyConfirm(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '待确认', Status: '3',Id: missionId, taskKind: '0'}})
    	    },
    	    readyEnd(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '已结束', Status: '4',Id: missionId, taskKind: '0'}})
    	    },
    	    readyClose(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '已关闭', Status: '5',Id: missionId, taskKind: '0'}})
    	    },
    	    readyExit(row){
    	    	let missionId = row.MissionId;
    	    	this.$router.push({name:'BussStatus', params: {pageKind: '已退出', Status: '6',Id: missionId, taskKind: '0'}})
    	    },
			NewMission(){
				this.$router.push({name:'ActivityDetail',params:{taskKind: '0',pageKind: 'new'}})
			},
	    	lookActivityDetail(row){
	    		this.$router.push({name:'ActivityDetail',params:{taskKind: '0',pageKind: 'detail','MissionId': row.MissionId}})
	    	},
	    	handleCurrentChange(val){
	    		 let _this = this;
	    		this.currentPage = val;
	    		this.handleClick(val)
	    	}
    },
   }
	
	
</script>

<style scoped="scoped">
	.content_title {
	padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    
  }
  .addActivity{
  	width: 150px;
  	height: 40px;
  	background: #1989FA;
  	color: #FFFFFF;
    font-weight: bold;
		float:right;
		margin-right: 20px;
  }
  .table_content{
  	padding: 20px;
  	background: #FFFFFF;
  }
  table,tbody,thead {
	  width: 100% !important;
	}
	colgroup {
	  position: absolute;
	  width: 100% !important;
	  display: flex;
	}
	col {
	  flex: 1;
	  text-align: center;
	}
</style>